<template>
<div class="header-shouye">
    <div class="left">
        <img src="../../assets/logo.png" alt="logo" />
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="设置" name="ShezhiShezhi"></el-tab-pane>
        </el-tabs>
    </div>
    <div class="right">
        <el-input :prefix-icon="Search" placeholder="请输入内容" class="custom-input" />
        <div class="icon">
            <el-icon style="font-size: 20px;" @click="handleMinimize">
                <Minus />
            </el-icon>
            <el-icon style="font-size: 20px;" @click="handleMaximize">
                <Plus />
            </el-icon>
            <el-icon style="font-size: 20px;" @click="handleClose">
                <Close />
            </el-icon>
        </div>
    </div>
</div>
<router-view />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { TabsPaneContext } from 'element-plus';
import { Search, Minus, Plus, Close } from '@element-plus/icons-vue';

const router = useRouter();
const activeTab = ref('ShezhiShezhi');

// 标签页切换：匹配嵌套路由
const handleTabClick = (tab: TabsPaneContext) => {
    router.push({ name: tab.paneName as string });
    activeTab.value = tab.paneName as string;
};

// 同步路由与标签激活态
watch(
    () => router.currentRoute.value.name,
    (name) => {
        activeTab.value = name as string;
    },
    // { immediate: true }
);

// Electron 窗口控制（需确保 preload 正确暴露 api）
declare global {
    interface Window {
        api: any;
    }
}
const { window: electronWindow } = window.api;

const handleMinimize = () => {
    electronWindow?.minimize();
};
const handleMaximize = () => {
    electronWindow?.maximize();
};
const handleClose = () => {
    electronWindow?.close();
};
</script>

<style scoped>
.header-shouye {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 0 20px;
}

.left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.left img {
    height: 40px;
    width: auto;
}

.right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.custom-input {
    width: 240px;
}

.icon {
    display: flex;
    gap: 15px;
    cursor: pointer;
}

::v-deep .el-tabs__item {
    color: #ff6699;
    font-size: 16px;
}

::v-deep .el-tabs__active-bar {
    background-color: #ff6699;
}
</style>